<template>
    <view class="container">
        <header-bar :config="config"></header-bar>
        <tab-bar :tabs="items" nobg="nobg" @clickTab="clickTab" :tabIndex="tabIndex"></tab-bar>
        <view class="main">
            <swiper
                class="swiper product-main-list"
                :style="{ height: listHeight }"
                :current="tabIndex"
                @change="swiperChange">
                <swiper-item v-for="(swiperItem, swiperIndex) in items" :key="swiperIndex">
                    <deliver-list
                        v-if="loadOk"
                        :ref="'productList_' + swiperIndex"
                        :height="listHeight"
                        :state="swiperItem.state"
                        :orderId="orderId"
                        @policy="showPolicy"></deliver-list>
                </swiper-item>
            </swiper>
        </view>
        <uni-popup ref="policyPop" type="bottom" :safe-area="false">
            <view class="pop-pro-list">
                <view class="pop-header">
                    <text class="text">商品清单</text>
                    <uni-icons class="icon-close" size="40" type="close" @click="$refs.policyPop.close()"> </uni-icons>
                </view>
                <scroll-view scroll-y class="scroll">
                    <inventory-item :data="Detaildata"></inventory-item>
                </scroll-view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { mapGetters } from "vuex"
import deliverList from "@/components/order/deliver-list.vue"
import tabBar from "@/components/common/tab-bar.vue"
import storage from "@/uni-sub-base/utils/storage.js"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import inventoryItem from "@/components/order/inventory-item.vue"
export default {
    components: {
        deliverList,
        tabBar,
        inventoryItem,
    },
    data() {
        return {
            config: {
                title: "发货记录",
                centerSlot: true,
            },
            isloadding: false,
            tabIndex: 0,
            items: [
                {
                    state: "1",
                    title: "已发货",
                },
                {
                    state: "2",
                    title: "未发货",
                },
            ],
            listHeight: "", //list所需高度
            loadOk: false,
            searchKey: "",
            orderId: "",
            Detaildata: null,
        }
    },
    watch: {
        //监听更新
        getUpOrderView(e) {
            this.refresh()
        },
    },
    computed: {
        ...mapGetters(["getUpOrderView"]),
    },
    onLoad(e) {
        this.orderId = e.orderId
    },
    onShow() {},
    mounted() {
        this.getListHeight()
    },
    methods: {
        //显示商品列表
        showPolicy(item) {
            this.Detaildata = item
            this.$refs.policyPop.open()
        },
        getListHeight(element) {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                this.listHeight = e + "px"
                this.loadOk = true
            })
        },
        swiperChange(e) {
            let tabIndex = e.detail.current
            this.clickTab(tabIndex)
        },
        //tab切换
        clickTab(index) {
            if (this.tabIndex != index) {
                this.tabIndex = index
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
}
.pop-pro-list {
    background: #f1f1f1;
    border-radius: 24rpx 24rpx 0 0;
    height: 70vh;

    .pop-header {
        display: flex;
        flex-direction: row;
        height: 88rpx;
        align-items: center;
        justify-content: center;
        border-radius: 24rpx 24rpx 0 0;
        background: #ffffff;

        .icon-close {
            position: absolute;
            right: 24rpx;
            color: $color-gray-3;
        }

        .text {
            font-size: $font-size-28;
            font-weight: 700;
        }
    }

    .scroll {
        height: 100%;
        background: #f1f1f1;
    }
}
</style>
